<template>
  <div style="width: 82.5%;margin-left: 8.8%">
    <!--    <div>-->
    <!--      <el-main>-->
    <!--        <el-row>-->
    <!--          <el-col>搜索结果:</el-col>-->
    <!--          <el-col style="margin: 10px 0" span="6" v-for="p in arr">-->
    <!--            <el-card style="margin: 10px 20px">-->
    <!--              <a :href="'/deil?id='+p.id"><img class="p_img" :src="p.url" width="100%">-->
    <!--                <div>-->
    <!--                  <p style="font-size: 15px;height: 40px;margin-top: 0">-->
    <!--                    {{ p.goodsName }}-->
    <!--                  </p>-->

    <!--                  <p style="font-size: 12px;color: #666">-->
    <!--                    价格:{{ p.money }} 库存:{{ p.num }}-->
    <!--                  </p>-->
    <!--                  <p style="font-size: 12px;color: #666">-->
    <!--                    出版社:{{ p.pressName }}-->
    <!--                  </p>-->
    <!--                  <p style="font-size: 12px;color: #666">-->
    <!--                    <span>销量:{{ p.nums }}件</span>-->
    <!--                  </p>-->
    <!--                </div>-->
    <!--              </a>-->
    <!--            </el-card>-->
    <!--          </el-col>-->
    <!--        </el-row>-->
    <!--      </el-main>-->

    <div>
      <el-row>
        <el-col :span="3">
          <el-button @click="sortById" style="border-style: none;">综合排序</el-button>
        </el-col>
        <el-col :span="3">
          <el-button @click="sortByMoney" style="border-style: none;">价格</el-button>
        </el-col>
        <el-col :span="3">
          <el-button @click="sortByNums" style="border-style: none;">销量</el-button>
        </el-col>
        <el-col :span="3">
          <el-button @click="sortByComment" style="border-style: none;">评论</el-button>
        </el-col>
        <el-col :span="3">
          <el-button @click="sortByTime" style="border-style: none;">出版时间</el-button>
        </el-col>
      </el-row>


    </div>

    <!--      <el-tabs v-model="activeName" @tab-click="handleClick" type="card">
            <el-tab-pane label="综合排序" name="sortById">

            </el-tab-pane>
            <el-tab-pane label="价格" name="sortByMoney">

            </el-tab-pane>
            <el-tab-pane label="销量" name="sortByNums">

            </el-tab-pane>
            <el-tab-pane label="评论" name="sortByComment">

            </el-tab-pane>
            <el-tab-pane label="出版时间" name="sortByTime">

            </el-tab-pane>
          </el-tabs>-->
    <!--      <el-row style="margin-left: 20%">
            <el-col :span="4" style="margin: 0 5px 0 3px">
              <a href="javascript:void(0)" onclick="sortById()">
                综合排序</a></el-col>
            <el-col :span="1">
            </el-col>
            <el-col :span="4" style="margin: 0 3px 0 5px">
              <a href="javascript:void(0)" onclick="sortByNums()">
                销量<i class="el-icon-caret-bottom"></i></a></el-col>
            <el-col :span="1">
            </el-col>
            <el-col :span="4" style="margin: 0 5px 0 5px">
              <a href="javascript:void(0)" onclick="sortByComment()">
                好评<i class="el-icon-caret-bottom"></i></a></el-col>
            <el-col :span="1">
            </el-col>
            <el-col :span="4" style="margin: 0 5px 0 5px">
              <a href="javascript:void(0)" onclick="sortByTime()">
                出版时间<i class="el-icon-caret-bottom"></i></a></el-col>
            <el-col :span="1">
            </el-col>
            <el-col :span="4" style="margin: 0 5px 0 5px">
              <a href="javascript:void(0)" onclick="sortByMoney()">
                价格<i class="el-icon-caret-bottom"></i></a></el-col>
          </el-row>-->

    <!--    </div>-->

    <div>
      <el-row>
        <el-col style="margin: 10px 0" span="6" v-for="p in productArr">
          <el-card style="margin: 10px 20px">
            <a :href="'/deil?id='+p.id"><img class="p_img" :src="p.url" width="100%">
              <div>
                <p style="font-size: 15px;height: 40px;margin-top: 0">
                  {{ p.goodsName }}
                </p>

                <p style="font-size: 12px;color: #666">
                  价格:{{ p.money }} 库存:{{ p.num }}
                </p>
                <p style="font-size: 12px;color: #666">
                  出版社:{{ p.pressName }}
                </p>
                <p style="font-size: 12px;color: #666">
                  <span>销量:{{ p.nums }}件</span>
                </p>
              </div>
            </a>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      productArr: {
        url: '',
        goodsName: '',
        money: '',
        num: '',
        pressName: '',
        nums: ''
      },
      /*arr: {
        url: '',
        goodsName: '',
        money: '',
        num: '',
        pressName: '',
        nums: ''
      },*/
      //activeName:''
      //isActive: {} //0综合排序，1销量，2评论，3出版时间4价格降序5价格升序
      search: {
        text: "a",
        typeid: 0
      },
      highSearch: {
        goodsName: "宋词三百年",
        author: "艾公子",
        pressName: "科学出版社",
        packId: 1,
        categoryId: 3
      }
    }
  },
  methods: {
    loadHot(hotid) {
      let url = 'http://localhost:8080/goods/searchhot/' + hotid;
      console.log('1111111111url = ' + url);
      this.axios.get(url).then((response) => {
        let responseBody = response.data;
        if (responseBody.state == 20000) {
          this.productArr = responseBody.data;
        } else {
          this.$message({
            type: 'info',
            message: "搜索失败"
          })
        }
      });
    },

    loadHighSearch(goodsName, author, pressName, packId, categoryId) {
      this.highSearch.goodsName = goodsName;
      this.highSearch.author = author;
      this.highSearch.pressName = pressName;
      this.highSearch.packId = packId;
      this.highSearch.categoryId = categoryId;
      let cs = this.qs.stringify(this.highSearch);
      console.log('highSearch************************');

      let url = 'http://localhost:8080/goods/highSearch';
      console.log('url**************' + url);

      this.axios.post(url, cs).then((response) => {
        let responseBody = response.data;
        this.productArr = responseBody.data;
        console.log("哈哈哈哈哈哈哈哈哈哈哈哈或或或或或",this.productArr);
      });
    },
    loadSearch(text, typeid) {
      //URLDecoder.decoder(this.gooodsName,"utf-8");
      // let goodsName = this.qs.stringify(text);
      // let categoryId = this.qs.stringify(typeid);
      this.search.text = text;
      this.search.typeid = typeid;
      let seatch = this.qs.stringify(this.search);
      console.log('search');
      // console.log('在localStorage中的JWT数据：' + localStorage.getItem('jwt'));
      let url = 'http://localhost:8080/goods/searchResult';
      console.log('1111111111url = ' + url);
      this.axios
          //.create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .post(url, seatch).then((response) => {
        let responseBody = response.data;
        this.productArr = responseBody.data;
      });
    },
    loadTypeId(typeid) {
      let url = 'http://localhost:8080/goods/loadTypeId/' + typeid;
      console.log('3333333333url = ' + url);
      this.axios.get(url).then((response) => {
        let responseBody = response.data;
        this.productArr = responseBody.data;
      });
    },

    handleClick(tab, event) {
      if (tab.name == 'sortById') {
        this.sortById();
      } else if (tab.name == 'sortByMoney') {
        this.sortByMoney();
      } else if (tab.name == 'sortByNums') {
        this.sortByNums();
      } else if (tab.name == 'sortByComment') {
        this.sortByComment();
      } else if (tab.name == 'sortByTime') {
        this.sortByTime();
      }

    },
    sortById() {
      // console.log('在localStorage中的JWT数据：' + localStorage.getItem('jwt'));
      let url = 'http://localhost:8080/goods/searchListById';
      console.log('url = ' + url);
      this.axios
          //.create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .get(url).then((response) => {
        let responseBody = response.data;
        this.productArr = responseBody.data;
      });
    },
    sortByNums() {
      // console.log('在localStorage中的JWT数据：' + localStorage.getItem('jwt'));
      let url = 'http://localhost:8080/goods/searchListByNums';
      console.log('url = ' + url);
      this.axios
          //.create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .get(url).then((response) => {
        let responseBody = response.data;
        this.productArr = responseBody.data;
      });
    },
    sortByComment() {
      // console.log('在localStorage中的JWT数据：' + localStorage.getItem('jwt'));
      let url = 'http://localhost:8080/goods/searchListByComments';
      console.log('url = ' + url);
      this.axios
          //.create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .get(url).then((response) => {
        let responseBody = response.data;
        this.productArr = responseBody.data;
      });
    },
    sortByTime() {
      // console.log('在localStorage中的JWT数据：' + localStorage.getItem('jwt'));
      let url = 'http://localhost:8080/goods/searchListByHouseTime';
      console.log('url = ' + url);
      this.axios
          //.create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .get(url).then((response) => {
        let responseBody = response.data;
        this.productArr = responseBody.data;
      });
    },
    sortByMoney() {
      // console.log('在localStorage中的JWT数据：' + localStorage.getItem('jwt'));
      let url = 'http://localhost:8080/goods/searchListByMoney';
      console.log('url = ' + url);
      this.axios
          //.create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .get(url).then((response) => {
        let responseBody = response.data;
        this.productArr = responseBody.data;
      });
    },
    loadSearchList() {
      // console.log('在localStorage中的JWT数据：' + localStorage.getItem('jwt'));
      let url = 'http://localhost:8080/goods/searchList';
      console.log('url = ' + url);
      this.axios
          //.create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .get(url).then((response) => {
        let responseBody = response.data;
        this.productArr = responseBody.data;
      });
    }
  },
  mounted() {
    this.sortById();
    let locationsearch = location.search;
    console.log("--------------------", locationsearch)
    if (locationsearch.indexOf('e') == 2) {
      console.log("/////////////////////////////////////", locationsearch.split("?")[1])
      let text = location.search.split("?")[1].split("&")[0].split("=")[1];
      console.log("text:" + text);
      let typeid = location.search.split("?")[1].split("&")[1].split("=")[1];
      console.log("typeid:" + typeid);
      this.loadSearch(text, typeid);
    } else if (locationsearch.indexOf('y') == 2) {
      let typeid = location.search.split("?")[1].split("&")[0].split("=")[1];
      console.log("typeid111111111111:" + typeid);
      this.loadTypeId(typeid);
    } else if (locationsearch.indexOf('h') == 1) {
      let hotid = location.search.split("?")[1].split("&")[0].split("=")[1];
      console.log("hotid333333333333333333333:" + hotid);
      this.loadHot(hotid);
    } else if (locationsearch.indexOf('g' == 1)) {
      /*http://localhost:8500/search?goodsName=&author=&pressName=&packId=&categoryId=3*/
      let goodsName = location.search.split("?")[1].split("&")[0].split("=")[1];
      console.log("---------------------------:" + goodsName);
      let author = location.search.split("?")[1].split("&")[1].split("=")[1];
      console.log("---------------------------:" + author);
      let pressName = location.search.split("?")[1].split("&")[2].split("=")[1];
      console.log("---------------------------:" + pressName);

      let packId = location.search.split("?")[1].split("&")[3].split("=")[1];
      console.log("---------------------------:" + packId);

      let categoryId = location.search.split("?")[1].split("&")[4].split("=")[1];
      console.log("---------------------------:" + categoryId);

      this.loadHighSearch(goodsName, author, pressName, packId, categoryId);
    }
  }
}
</script>

<style>
* {
  margin: 0;
}

.p_img:hover {
  position: relative;
  top: 5px;
  /* 设置元素阴影 :  x偏移值  y偏移值  浓度(值越大越模糊)  范围  颜色 */
  box-shadow: 0 0 10px 5px #333;
}

p {
  margin: 4px 4px;
}
</style>